import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'
import React,{ useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from '../../hooks/useSelector'
import { getCategory } from '../../store/actions/category.action'
import { SearchProducPayload, searchProduct } from '../../store/actions/product.action'
import ProductItem from './ProductItem'

const Search = () => {
  const dispatch = useDispatch()
  const { category } = useSelector(state=> state.category)
  const { search } = useSelector(state=> state.product)
  useEffect(()=>{
    dispatch(getCategory())
  },[])
  const onFinish=(value: SearchProducPayload)=>{
    dispatch(searchProduct(value))
  }
  return (
    <>
      <Form layout='inline' initialValues={{category:'All'}} onFinish={onFinish}>
        <Input.Group compact>
          <Form.Item name={'category'}>
            <Select>
              <Select.Option value={'All'}>所有分类</Select.Option>
              { category.result.map(item=> (
                <Select.Option value={item._id} key={item._id}>{ item.name }</Select.Option>
              )) }
            </Select>
          </Form.Item>
          <Form.Item name={'search'}>
            <Input placeholder='请输入搜索关键字'/>
          </Form.Item>
          <Form.Item>
            <Button htmlType='submit'>搜索</Button>
          </Form.Item>
        </Input.Group>
      </Form>
      <Divider/>
      <Row gutter={[16,16]}>
        {
          search.map(item=> (
            <Col span={6}>
              <ProductItem product={item} />
            </Col>
          ))
        }
      </Row>
    </>
  )
}

export default Search